import React, { useEffect } from 'react';
import { HashRouter, Route, Routes } from 'react-router-dom';
import PoemDetailPage from './Page/PoemDetailPage';
import HomePage from './Page/HomePage';
import NavBar from './Component/NavBar';

import 'bootstrap/dist/css/bootstrap.min.css';

import { library } from '@fortawesome/fontawesome-svg-core'
import { fab } from '@fortawesome/free-brands-svg-icons'
import { faUser, faStar, faThumbsUp, faTags, faSearch, faPen, faHome, faPaperPlane, faRightFromBracket, faArrowLeft, faKey } from '@fortawesome/free-solid-svg-icons'
import PoemsPage from './Page/PoemsPage';
import AuthorDetailPage from './Page/AuthorDetailPage';
import AuthorsPage from './Page/AuthorsPage';
import TagsPage from './Page/TagsPage';
import TageDetailPage from './Page/TagDetailPage';
import SearchPage from './Page/SearchPage';
import Login from './Component/Login';
import LoginRegisterPage from './Page/LoginPage';
import { GlobalConext, defaultGlobalContext, globalReducer } from './GlobalContext';
import { MessageBoxProvider } from './Modal/MessageBox_Context';
import CollectionPage from './Page/CollectionsPage';
import CollectionDetailPage from './Page/CollectionDetailPage';
import { InputBoxProvider } from './Modal/InputBox_Context';
import ProfilePage from './Page/ProfilePage';
import AdminPoemsPage from './Page/Admin/AdminPoemsPage';
import { EditBoxProvider } from './Modal/EditBox_Content';
import AdminAuthorsPage from './Page/Admin/AdminAuthorsPage';
import AdminTagsPage from './Page/Admin/AdminTagsPage';
import AdminPage from './Page/Admin/AdminPage';
import NotFoundPage from './Page/NotFoundPage';

library.add(fab, faUser, faStar, faThumbsUp, faTags, faSearch, faPen, faHome, faPaperPlane, faRightFromBracket, faArrowLeft, faKey)

function App() {
  let ret = (
    <div className="App">
      <HashRouter>
        <NavBar />
        <div className='body py-4' style={{transition: 'all 1s'}}>
          <Routes>
            <Route path='/' element={<HomePage />} />

            <Route path='/login' element={<LoginRegisterPage type="login" />} />
            <Route path='/register' element={<LoginRegisterPage type="register" />} />

            <Route path='/me/collection' element={<CollectionPage />} />
            <Route path='/me/collection/:id' element={<CollectionDetailPage />} />
            <Route path='/me' element={<ProfilePage />} />

            <Route path='/admin' element={<AdminPage />} />
            <Route path='/admin/poems' element={<AdminPoemsPage />} />
            <Route path='/admin/authors' element={<AdminAuthorsPage />} />
            <Route path='/admin/tags' element={<AdminTagsPage />} />

            <Route path='/poem/:id' element={<PoemDetailPage />} />
            <Route path='/poem' element={<PoemsPage />} />
            <Route path='/author/:id' element={<AuthorDetailPage />} />
            <Route path='/author' element={<AuthorsPage />} />
            <Route path='/tag/:id' element={<TageDetailPage />} />
            <Route path='/tag' element={<TagsPage />} />
            <Route path='/search' element={<SearchPage />} />

            <Route path='*' element={<NotFoundPage />} />
          </Routes>
        </div>
      </HashRouter>
    </div>
  );

  let [state, dispatch] = React.useReducer(globalReducer, defaultGlobalContext);
  useEffect(() => {
    dispatch({
      type: 'set-dispatch',
      payload: dispatch
    });
  }, []);

  return (
    <GlobalConext.Provider value={ [state, dispatch] }>
      <MessageBoxProvider>
        <InputBoxProvider>
          <EditBoxProvider>
            {ret}
          </EditBoxProvider>
        </InputBoxProvider>
      </MessageBoxProvider>
    </GlobalConext.Provider>
  );
}

export default App;
